<template>
    <div v-loading="loading">
        <el-dialog :title="type == 'create' ? '添加代理' : '修改代理'" :visible.sync="visible" width="800px">
            <el-form :model="form" label-width="180px">

                <el-form-item label="账号" v-if="type == 'create'">
                    <el-input placeholder="请输入设置登录账号" style="width: 500px" v-model="form.username"></el-input>
                </el-form-item>

                <el-form-item label="手机号" v-if="type == 'create'">
                    <el-input placeholder="请输入手机号" style="width: 500px" :maxlength="11"  v-model="form.mobile"></el-input>
                </el-form-item>

                <el-form-item label="密码" v-if="type == 'create'">
                    <el-input show-password placeholder="请输入密码" style="width:500px" v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" v-if="type == 'create'">
                    <el-input show-password placeholder="请确认密码" style="width:500px" v-model="confirmPassword"></el-input>
                </el-form-item>

                <el-form-item label="昵称" v-if="type == 'create'">
                    <el-input placeholder="请输入昵称" style="width: 500px" v-model="form.nickname"></el-input>
                </el-form-item>

                <el-form-item label="上传头像" v-if="type == 'create'">
                    <medium v-model="form.avatar"></medium>
                </el-form-item>

                <el-form-item label="禁用状态">
                    <el-switch @change="showFun" active-color="#13ce66" inactive-color="#999" v-model="show"></el-switch>
                </el-form-item>

                <el-form-item label="付费直播间抽佣比例（%）">
                    <el-input placeholder="请输入付费直播间抽佣比例" style="width: 500px" v-model="form.live_fee_rate"></el-input>
                </el-form-item>

                <el-form-item label="直播间礼物抽佣比例（%）">
                    <el-input placeholder="请输入直播间礼物抽佣比例" style="width: 500px" v-model="form.live_gift_rate"></el-input>
                </el-form-item>

                <el-form-item label="长视频付费抽佣比例（%）">
                    <el-input placeholder="请输入长视频付费抽佣比例" style="width: 500px" v-model="form.long_rate"></el-input>
                </el-form-item>

                <el-form-item label="短视频付费抽佣比例（%）">
                    <el-input placeholder="请输入短视频付费抽佣比例" style="width: 500px" v-model="form.short_rate"></el-input>
                </el-form-item>

                <el-form-item label="打赏作品时抽佣比例（%）">
                    <el-input placeholder="请输入打赏作品时抽佣比例" style="width: 500px" v-model="form.tipping_rate"></el-input>
                </el-form-item>

                <el-form-item label="1V1密聊抽佣比例（%）">
                    <el-input placeholder="请输入1V1密聊抽佣比例" style="width: 500px" v-model="form.one_by_one_rate"></el-input>
                </el-form-item>

                <el-form-item label="同城空降抽佣比例（%）">
                    <el-input placeholder="请输入同城空降抽佣比例" style="width: 500px" v-model="form.same_city_rate"></el-input>
                </el-form-item>



            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit"  :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-button @click="toForm()" size="small" style="width: 150px" type="success">添加</el-button>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" :tree-props="{ children: 'childrens' }" max-height="800px" row-key="id" size="small"
                style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>

                <el-table-column label="用户名" prop="username"></el-table-column>

                <el-table-column label="头像" prop="avatar">
                    <template slot-scope="scope">
                        <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.avatar"
                            :preview-src-list="toArray(scope.row.avatar)">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column label="手机号" prop="mobile"></el-table-column>

                <el-table-column label="昵称" prop="nickname"></el-table-column>

                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button @click="addForm(scope.row.id)" size="mini" style="padding: 10px" type="primary" >添加</el-button> -->
                        <el-button @click="toForm(scope.row)" size="mini" style="padding: 10px"
                            type="primary">修改</el-button>
                        <!-- <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" style="padding: 10px" type="danger">删除</el-button>
                        </el-popconfirm> -->

                        <el-button @click="toDetails(scope.row)" size="mini" type="success"
                            style="padding: 10px">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <!-- 详情 -->
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">

            <el-descriptions class="margin-top" title="" :column="2" :border="true" style="text-align: center;">
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">
                        用户名
                    </template>
                    <!-- {{ agentDetails.username }} -->
                    <div style="display: flex;align-items: center;">
                        <el-avatar size="medium" :src="agentDetails.avatar" style="margin-right: 10px"></el-avatar>
                        <div style="font-size: 14px;"> {{ agentDetails.username }} </div>
                    </div>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        昵称
                    </template>
                    {{ agentDetails.nickname }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        手机号
                    </template>
                    {{ agentDetails.mobile }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        密码
                    </template>
                    {{ agentDetails.password }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        关联用户ID
                    </template>
                    {{ agentDetails.with_user }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        收益秀币
                    </template>
                    {{ agentDetails.balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        代理币
                    </template>
                    {{ agentDetails.agent_balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        代理级别
                    </template>
                    {{ agentDetails.level }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        上级代理
                    </template>
                    {{ agentDetails.parent_id ?  agentDetails.parent.cert_name : '' }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        保证金
                    </template>
                    {{ agentDetails.deposit }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        付费直播间抽佣比例
                    </template>
                    {{ agentDetails.live_fee_rate }} %
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        直播间礼物抽佣比例
                    </template>
                    {{ agentDetails.live_gift_rate }} %
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        长视频付费抽佣比例
                    </template>
                    {{ agentDetails.long_rate }} %
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        短视频付费抽佣比例
                    </template>
                    {{ agentDetails.short_rate }} %
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        打赏作品时抽佣比例
                    </template>
                    {{ agentDetails.tipping_rate }} %
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        1V1密聊抽佣比例
                    </template>
                    {{ agentDetails.one_by_one_rate }} %
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        同城空降抽佣比例
                    </template>
                    {{ agentDetails.same_city_rate }} %
                </el-descriptions-item>



                <el-descriptions-item>
                    <template slot="label">
                        实名姓名
                    </template>
                    {{ agentDetails.cert_name ? agentDetails.cert_name : "" }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        实名身份证号码
                    </template>
                    {{ agentDetails.cert_no }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        是否实名认证成功
                    </template>
                    {{ agentDetails.authentication == 0 ? "否" : "是" }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
        <template slot="label">
            记住token
        </template>
        {{ agentDetails.cert_no }}
    </el-descriptions-item> -->

                <el-descriptions-item>
                    <template slot="label">
                        登录IP
                    </template>
                    {{ agentDetails.login_ip }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        登录时间
                    </template>
                    {{ agentDetails.login_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        创建时间
                    </template>
                    {{ agentDetails.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        修改时间
                    </template>
                    {{ agentDetails.updated_at }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
        <template slot="label">
            删除时间
        </template>
        {{ agentDetails.cert_no }}
    </el-descriptions-item> -->

            </el-descriptions>


        </el-drawer>
    </div>
</template>
    
<script>
import treeSelect from '@/components/SelectTree/index'
import SelectIcon from '@/components/SelectIcon/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    mixins: [initData],
    components: {
        treeSelect,
        SelectIcon,
        medium
    },
    data() {
        return {
            form: {
                username: '',
                mobile: '',
                nickname: '',
                avatar: '',
                disable: 0,  //0不禁用，1禁用
                live_fee_rate: '',
                live_gift_rate: '',
                long_rate: '',
                short_rate: '',
                tipping_rate: '',
                one_by_one_rate: '',
                same_city_rate: '',
                password: '123456'
            },
            confirmPassword: '',
            show: false,
            visible: false,
            loading: false,
            data: [],
            page: 1,
            tableData: [],
            type: 'create',
            agentDetails: {},
            drawer: false,
            id:"",
            submitComplete:false
        }
    },
    mounted() {
        this.getOfflineAgentList()
    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },

        toDetails(res) {
            this.agentDetails = res
            this.drawer = true
        },

        showFun(res) {
            this.form.disable = res ? 1 : 0
            this.show = res
        },

        getOfflineAgentList() {
            let that = this
            this.$request.get('/offline-agent/index').then((res) => {
                this.data = res
                console.log(this.data, 111)
                // this.init()
            })
        },

        del(id) {
            this.$request.del('/creation-category/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.getOfflineAgentList()
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
                this.id = form.id  
                this.form = {
                    disable: form.disable,  //是否禁用
                    live_fee_rate: form.live_fee_rate,
                    live_gift_rate: form.live_gift_rate,
                    long_rate: form.long_rate,
                    short_rate: form.short_rate,
                    tipping_rate: form.tipping_rate,
                    one_by_one_rate: form.one_by_one_rate,
                    same_city_rate: form.same_city_rate,
                }

                this.show = form.disable == 0 ? false : true

            } else {
                this.type = 'create'
                this.worksId = ''
                this.form = {
                    username: '',
                    mobile: '',
                    nickname: '',
                    avatar: '',
                    disable: 0,  //是否禁用
                    live_fee_rate: '',
                    live_gift_rate: '',
                    long_rate: '',
                    short_rate: '',
                    tipping_rate: '',
                    one_by_one_rate: '',
                    same_city_rate: '',
                    password: ''
                }
            }
        },
        closeBox() {
            this.visible = false
            this.type = 'create'
            this.form = {
                username: '',
                mobile: '',
                nickname: '',
                avatar: '',
                disable: 0,  //是否禁用
                live_fee_rate: '',
                live_gift_rate: '',
                long_rate: '',
                short_rate: '',
                tipping_rate: '',
                one_by_one_rate: '',
                same_city_rate: '',
            }
        },

        //提交
        submit() {
            console.log(' this.form', this.form)
            if (this.submitComplete) return
            this.submitComplete = true
            if (this.type == 'create') {
                if (!(
                    this.form.username
                    && this.form.mobile && this.form.nickname
                    && this.form.avatar
                )) {
                    this.$message({
                        message: '请将信息填写完整！',
                        type: 'warning'
                    });
                    this.submitComplete = false
                    return
                }

                if (this.form.password != this.confirmPassword) {
                    this.$message({
                        message: '两次密码输入不一致',
                        type: 'warning'
                    });
                    this.submitComplete = false
                    return
                }
            }

            if (!(
               // this.form.disable != '' &&
                 this.form.live_fee_rate && this.form.live_gift_rate
                && this.form.long_rate && this.form.short_rate
                && this.form.tipping_rate && this.form.one_by_one_rate
                && this.form.same_city_rate
            )) {    


                console.log(this.form,5656)
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }


            if ((
                this.form.live_fee_rate > 100 || this.form.live_gift_rate > 100
                || this.form.long_rate > 100 || this.form.short_rate > 100
                || this.form.tipping_rate > 100 || this.form.one_by_one_rate > 100
                || this.form.same_city_rate > 100
            )) {
                this.$message({
                    message: '抽佣比例最高是100',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }


            if (this.type == 'create') {
                this.$request.post('/offline-agent/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                    })

                    this.getOfflineAgentList()
                    this.closeBox()
                    this.submitComplete = false
                }).catch((error)=>{
                this.submitComplete = false
                });
            } else {
                this.$request.put('/offline-agent/modify/' + this.id, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                    })
                    this.getOfflineAgentList()
                    this.closeBox()
                    this.submitComplete = false
                }).catch((error)=>{
                this.submitComplete = false
                });
            }
        },
    },



}
</script>
    
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>